/*
  Bubble-自定义气泡类
  @params container node 气泡容器层
  @params bubbleInfo object 气泡数据对象
  @params context object Vue执行组件上下文
  子类拥有各自独立的buildBubbleDom方法
    render 渲染html
    addEvent 绑定事件
*/

const hiddenFields = ['业务对象ID', '按钮', '目录ID', '顶牌数据', '管理行政区划ID']
export class Bubble {
  constructor (container, bubbleInfo, context) {
    this.bubbleDom = ''
    this.container = container
    this.bubbleInfo = bubbleInfo
    this.context = context
  }

  // 获取气泡的z-index
  getIndex () {
    return parseInt(String(new Date().getTime()).substr(5, 5))
  }

  // 获得气泡的按钮文字列表
  getBtnsList () {
    return this.bubbleInfo['按钮']
  }

  // 获取可展示的字段
  getDisplayData () {
    const { id, 业务对象ID, 按钮, 目录ID, 顶牌数据, 管理行政区划ID, ...rest } = this.bubbleInfo
    return rest
  }
}

// 顶牌格式
export class TopBubble extends Bubble {
  constructor (container, bubbleInfo, context) {
    super(container, bubbleInfo, context)
  }

  // 构建气泡节点
  buildBubbleDom () {
    const bubbleIndex = this.getIndex()
    const bubbleClassName = 'ol-popup-simple'
    // let bubbleContent = this.filterBubbleTop()
    const bubbleName = this.bubbleInfo.业务对象ID
    const bubbleDom = document.createElement('div')
    bubbleDom.innerText = bubbleName + ','
    bubbleDom.style.zIndex = bubbleIndex
    bubbleDom.id = this.bubbleInfo.id
    bubbleDom.className = bubbleClassName
    this.container.appendChild(bubbleDom)
  }

  // 获取顶牌数据
  filterBubbleTop () {
    const topBubble = this.bubbleInfo.顶牌数据
    let str = ''
    topBubble.forEach((element, index) => {
      let symbol = ','
      if (index === topBubble.length - 1) {
        symbol = ''
      }
      str += `${element}：${this.bubbleInfo[element]}${symbol}`
    })
    return str
  }
}

// 气泡格式
export class NormalBubble extends Bubble {
  constructor (container, bubbleInfo, context) {
    super(container, bubbleInfo, context)
  }

  // 构建基本气泡
  buildBubbleDom () {
    this.render()
    this.addEvent()
  }

  render () {
    const bubbleIndex = this.getIndex()
    const bubbleID = this.bubbleInfo.id
    const bubbleName = this.bubbleInfo.名称
    const dom = `
    <div class="ol-popup" id=${bubbleID} z-index=${bubbleIndex}>
      <b class="ol-popup-closer"></b>
      <div class="ol-bubble-content">
        <h3 class="bubble-title">${bubbleName}</h3>
        <div class="bubble-content"></div>
        <div calss="bubble-btn-box">
        </div>
        <div class="bubble-btn-box"></div>
      </div>
    </div>`
    this.container.innerHTML = dom
    this.bubbleDom = document.getElementById(this.bubbleInfo.id)
    this.renderMainContent()
    this.rederBtnContent()
  }

  renderMainContent () {
    const mainConentDom = this.bubbleDom.getElementsByClassName('bubble-content')[0]
    let mainConentInner = '' // 气泡内容
    const bubbleOption = this.getDisplayData()
    console.log(bubbleOption)
    for (const key in bubbleOption) {
      mainConentInner = mainConentInner + `<p>${key}：${bubbleOption[key]}</p><br/>`
    }
    mainConentDom.innerHTML = mainConentInner
  }

  rederBtnContent () {
    const mainConentDom = this.bubbleDom.getElementsByClassName('bubble-btn-box')[0]
    const btnDom = ` 
      <div class="bubble-btn">周边资源</div>
      <div class="bubble-btn">关系图谱</div>
      <div class="bubble-btn">查看详情</div>
    `
    mainConentDom.innerHTML = btnDom
  }

  addEvent () {
    const _this = this
    const closeBtn = this.bubbleDom.getElementsByClassName('ol-popup-closer')[0]
    closeBtn.addEventListener('click', this.eventCloseBubble.bind(_this))
  }

  eventCloseBubble () {
    this.context.removeBubble(this.bubbleInfo.id)
  }
}
